<template>
  <el-dialog v-model="openTimedConfigDialog" :title="title" width="500px">
    <div class="w-full radio">
      <el-radio-group v-model="sendType">
        <el-radio value="once">单次发送</el-radio>
        <el-radio value="daily">每天循环</el-radio>
        <el-radio value="weekly">周次发送</el-radio>
      </el-radio-group>
    </div>
    <div class="w-full border-bottom border-text1" v-if="sendType === 'once'">
      <el-row>
        <el-col :span="4"><el-text style="line-height: 32px;">时间选择：</el-text></el-col>
        <el-col :span="6">
          <el-date-picker v-model="onceSendTime" type="datetime" placeholder="请选择时间"></el-date-picker>
        </el-col>
      </el-row>
    </div>
    <div class="w-full border-bottom border-text2" v-if="sendType === 'daily'">
      <el-row>
        <el-col :span="4"><el-text style="line-height: 32px;">开始时间：</el-text></el-col>
        <el-col :span="6">
          <el-time-picker v-model="dailySendTime" type="datetime" placeholder="请选择时间"></el-time-picker>
        </el-col>
      </el-row>
    </div>
    <div class="w-full border-bottom border-text3" v-if="sendType === 'weekly'">
      <el-row style="margin-bottom: 15px;">
        <el-col :span="24">
          <el-checkbox-group v-model="selectedDays">
            <el-checkbox value="1">周一</el-checkbox>
            <el-checkbox value="2">周二</el-checkbox>
            <el-checkbox value="3">周三</el-checkbox>
            <el-checkbox value="4">周四</el-checkbox>
            <el-checkbox value="5">周五</el-checkbox>
            <el-checkbox value="6">周六</el-checkbox>
            <el-checkbox value="7">周日</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><el-text style="line-height: 32px;">发送时间：</el-text></el-col>
        <el-col :span="6">
          <el-time-picker v-model="weeklySendTime" type="datetime" placeholder="请选择时间"></el-time-picker>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="openTimedConfigDialog = false">取消</el-button>
        <el-button type="primary" @click="confirm()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import emitter from "@/utils/mitt-bus";
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      openTimedConfigDialog: false,
      title: '',
      sendType: 'once',
      onceSendTime: '',
      dailySendTime: '',
      weeklySendTime: '',
      selectedDays: [],
    };
  },
  computed: {
  },
  mounted() {
    emitter.on("openTimedConfigDialog", (type) => {
      this.openTimedConfigDialog = true
      this.title = '设置定时发送时间'
    });

  },
  methods: {
    confirm() {
      let time = null
      let timeTag = null
      if (this.sendType === 'once') {
        if (this.onceSendTime === '' || this.onceSendTime === null) {
          ElMessage.error('设置时间不为空')
          return
        }
        const t = this.onceSendTime
        time = this.onceSendTime
        timeTag = `${t.getMonth() + 1}月${t.getDate()}日 ${t.getHours()}时${t.getMinutes()}分`
      } else if (this.sendType === 'daily') {
        if (this.dailySendTime === '' || this.dailySendTime === null) {
          ElMessage.error('设置时间不为空')
          return
        }
        const t = this.dailySendTime
        time = `${t.getSeconds()} ${t.getMinutes()} ${t.getHours()} * * *`
        timeTag = `每天${t.getHours()}时${t.getMinutes()}分`
      } else if (this.sendType === 'weekly') {
        if (this.weeklySendTime === '' || this.weeklySendTime === null || this.selectedDays.length == 0) {
          ElMessage.error('设置时间不为空')
          return
        }
        const t = this.weeklySendTime
        const day = this.selectedDays.sort().join(',');
        time = `${t.getSeconds()} ${t.getMinutes()} ${t.getHours()} * * ${day}`
        timeTag = `每周【${day}】 ${t.getHours()}时${t.getMinutes()}分`
      }

      this.openTimedConfigDialog = false
      emitter.emit('onAddTimedTask', { time: time, timeTag: timeTag })
    },
  }
};
</script>
<style>
.radio {
  display: flex;
  justify-content: center;
  padding: 15px;
}

.border-bottom {
  position: relative;
  border: 1px solid rgb(223, 215, 215);
  border-radius: 5px;
  padding: 20px 15px;
}

.border-text1::before {
  content: "单次发送";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
}

.border-text2::before {
  content: "每天发送";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
}

.border-text3::before {
  content: "每周发送";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
}
</style>
